<template>
  <div>
    <div
      class="bar_wrap"
      id="main"
      style="width: 500px; height: 400px; background: salmon"
    ></div>
  </div>
</template>
<script>
export default {
  name: 'bars',
  props: {
    barData: {
      type: Array,
      default: []
    },
    xArr: {
      type: Array,
      default: []
    },
    title: {}
  },
  data () {
    return {}
  },
  created () {
    // this.$nextTick(() => {
    //   console.log(this.bardata)
    //   this.initBar()
    // })
  },
  mounted () {
    console.log(this.barData)
    this.initBar()
  },
  watch: {
    barData () {
      this.initBar()
    }
  },
  methods: {
    initBar () {
      // 1初始化eacharts 实例
      console.log(this.$echarts)
      var mybar = this.$echarts.init(document.getElementById('main'))
      // 2 准备图标配置项
      const option = {
        title: {
          text: this.title
        },
        legend: {},
        tooltip: {},
        xAxis: {
          data: this.xArr
        },
        yAxis: {},
        series: [
          {
            name: '人数',
            type: 'bar',
            data: this.barData
          }
        ]
      }
      // 3. 将配置设置给 实例
      mybar.setOption(option)
    }
  }
}
</script>
<style lang="less"></style>
